﻿/*贴纸效果*/
var iniClientX=0;
var ultClientX=0;
var disVal=0;
var el=document.getElementById('tag-pic');
var START_X = Math.round((el.parentNode.offsetWidth - el.offsetWidth) / 2);
var START_Y = Math.round((el.parentNode.offsetHeight - el.offsetHeight) / 2);

var ticking = false;
var transform; //图像效果
var timer;
var initAngle = 0; //旋转角度
var initScale = 1; //放大倍数
var mc = new Hammer.Manager(el); //用管理器 可以同时触发旋转 拖拽 移动

$('.swing').bind('touchstart',function(event){
    iniClientX=event.originalEvent.changedTouches[0].pageX;
});

$('.swing').bind('touchend',function(event){
    START_X = Math.round(($('#tag-pic').parent().width() - $('#tag-pic').width()) / 2);
    START_Y = Math.round(($('#tag-pic').parent().height() - $('#tag-pic').height()) / 2);

    ultClientX=event.originalEvent.changedTouches[0].pageX;
    disVal=ultClientX-iniClientX;

    if(disVal==0){
        $('.drag-area').css('display','block');
	transform = {
        	translate: { x: START_X, y: START_Y },
        	scale: 1,
        	angle: 0,
        	rx: 0,
        	ry: 0,
        	rz: 0
    	};
	initAngle =0;
        if($(this).data('off')=='select'){
            $('.swin').each(function(){
                $(this).removeClass('swiper-selected');
                $(this).data('off','select');
            });
            $(this).addClass('swiper-selected');
            $(this).data('off','selected');
            $('#tag-pic').attr('src',$(this).find('img').attr('src'));
            $('#tag-pic').css({
                'transform':'translate('+($('.drag-area').width()-$('#tag-pic').width())/2+'px,'+($('.drag-area').height()-$('#tag-pic').height())/2+'px)'
            });
        }else{
            $(this).removeClass('swiper-selected');
            $(this).data('off','select');
            $('.drag-area').css('display','none');
        }
    }
});

var reqAnimationFrame = (function () {
    return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

/*var ticking = false;
var transform; //图像效果
var timer;
var initAngle = 0; //旋转角度
var initScale = 1; //放大倍数
var mc = new Hammer.Manager(el); //用管理器 可以同时触发旋转 拖拽 移动*/
//var mc = new Hammer(el); //旋转和移动互斥
/**
 ev.srcEvent.type touchstart touchend touchmove
 ev.deltaX 手势移动位移变量
 */
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
//结束时做一些处理
mc.on("hammer.input", function(ev) {
    if(ev.isFinal) {
        //console.log(START_X+" "+transform.translate.x +" "+ev.deltaX);
        START_X = transform.translate.x ;
        START_Y = transform.translate.y ;
    }

});
mc.on("panstart panmove", onPan);
mc.on("rotatestart rotatemove rotateend", onRotate);
mc.on("pinchstart pinchmove", onPinch);
/**
 第二次进入拖拽时 delta位移重置
 移动时 初始位置startxy不动。delta增加
 */
function onPan(ev){
    if(!ev.isFinal) {
        el.className = '';
        console.log(START_X +" "+ START_Y +" | "+ev.deltaX +" "+ ev.deltaY);

        if(ev.deltaX<-START_X){
            ev.deltaX=-START_X;
        }
        if(ev.deltaY<-START_Y){
            ev.deltaY=-START_Y;
        }

        if(ev.deltaX>el.parentNode.offsetWidth-el.offsetWidth-START_X & ev.deltaX>0){
            ev.deltaX=el.parentNode.offsetWidth-el.offsetWidth-START_X;
        }
        if(ev.deltaY>el.parentNode.offsetHeight-el.offsetHeight-START_Y & ev.deltaY>0){
            ev.deltaY=el.parentNode.offsetHeight-el.offsetHeight-START_Y;
        }

        transform.translate = {
            x: START_X + ev.deltaX,
            y: START_Y + ev.deltaY
        };
        requestElementUpdate();
    }
}
function onPinch(ev){
    if(ev.type == 'pinchstart') {
        initScale = transform.scale || 1;
    }
    el.className = '';
    //alert(ev);
    transform.scale = initScale * ev.scale;
    requestElementUpdate();
}
//旋转相关
var preAngle =0 ;
var tempAngleFlag=0;
var deltaAngle = 0;
var startRotateAngle = 0;
function onRotate(ev) {
    //点下第二个触控点时触发
    if(ev.type == 'rotatestart') {
        startRotateAngle = ev.rotation ;
        tempAngleFlag = 0 ;
    }
    if(ev.type == 'rotatemove'){
        if(tempAngleFlag == 0){
            preAngle = startRotateAngle;
            tempAngleFlag ++;
        }else{
            deltaAngle = ev.rotation - preAngle;
            el.className = '';
            transform.rz = 1; //非0 垂直xy轴
            transform.angle =initAngle + deltaAngle;
            requestElementUpdate();
        }
    }

    //旋转结束 记录当前图片角度
    if(ev.type =='rotateend'){
        initAngle = transform.angle;
    }
}

function updateElementTransform() {
    var value = [
        'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
        'scale(' + transform.scale + ', ' + transform.scale + ')',
        'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
    ];
    value = value.join(" ");
    el.style.webkitTransform = value; /*为Chrome/Safari*/
    el.style.mozTransform = value; /*为Firefox*/
    el.style.transform = value; /*IE Opera?*/
    ticking = false;
}
function requestElementUpdate() {
    if(!ticking) {
        reqAnimationFrame(updateElementTransform);
        ticking = true;
    }
}
/**
 初始化设置
 */
function resetElement() {
    el.className = 'animate';
    transform = {
        translate: { x: START_X, y: START_Y },
        scale: 1,
        angle: 0,
        rx: 0,
        ry: 0,
        rz: 0
    };
    requestElementUpdate();
}
resetElement();